<template>
  <div class="hello" ref="hello" style="width:100px">
    {{name}}
    <button @click="change">click</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: 'Hello Wrold'
    }
  },
  created() {
    
  },
  methods: {
    change() {
      console.log(this.$refs.hello.clientHeight)
      this.name = "Hello WroldHello WroldHello WroldHello WroldHello WroldHello WroldHello Wrold"
      Promise.resolve().then(() => {
        console.log(this.$refs.hello.clientHeight)
      })
      this.$nextTick(() => {
        console.log(this.$refs.hello.clientHeight)
        let st = Date.parse(new Date())
        let cur = st
        while(cur < (st + 5*1000)) {
          cur = Date.parse(new Date())
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
